<template>
    <div>
        <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
            <div class="iconfont header-abs-back">&#xe624;</div>
        </router-link>  
        <div class="header-fixed" v-show="!showAbs" :style="opacityScroll">
            <router-link tag="div" to="/" class="header-fiexd">
            <div class="iconfont header-fixed-back">&#xe624;</div>
        </router-link> 
            景点详情
        </div>
    </div>
</template>

<script>
export default {
  name:'DetailHeader' ,
  data () {
      return {
          showAbs:true,
          opacityScroll:{
              opacity:0
          }
      }

  },
  methods:{
      handleScroll(){
          const cont =document.documentElement.scrollTop
          if(cont>60){
              let opacity=cont/140
              opacity=opacity>1?1:opacity
              this.opacityScroll={ opacity}
              this.showAbs=false
          }else{
              this.showAbs=true
          }
      }
  },
  activated () {
      window.addEventListener('scroll',this.handleScroll)
  },
  deactivated (){
      window.removeEventListener('scroll',this.handleScroll)
  } 

}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles'
.header-abs
    position:absolute
    left:10px
    top:10px
    width:40px
    height:40px
    line-height:40px
    text-align:center
    border-radius:20px
    background:rgba(0,0,0 ,0.8)
    .header-abs-back
        color:#fff
.header-fixed
    position:fixed
    top:0
    left:0
    right:0
    z-index:2
    height:$headerHeight
    line-height:$headerHeight
    text-align:center
    color:#fff
    background:$bgColor
    font-size:16px
    .header-fixed-back
        width:32px
        text-align:center
        font-size:20px
        position:absolute
        top:0
        left:0
        float :left
        color:#fff

       

</style>
